<template>
  <div class="box" v-transition>
    <Title :place="place" :icon="icon" @handleTitleClick="handleTitleClick" :title="title_home"></Title>
    <div ref="verticode" :style="{height:height,backgroundColor:'#F0EFF4'}">
      <Timper ref="timper" @requestSendCode="requestSendCode" @change_next="change_next"></Timper>
    </div>

    <div class="n_layout" v-if="n_layout" :style="{height:height,backgroundColor:'#ffffff',}">
      <p class="text">{{this.Lang[this.$store.state.lang].changePass_t6}} :</p>
      <p>
        <input
          class="text_value"
          type="password"
          v-model="passBox.pass1"
          placeholder="6 digits"
          oninput="this.value=this.value.replace(/\D/g,'')"
          onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
          autocomplete="off"
          onpaste="return false;"
        />
      </p>
      <p class="text">{{this.Lang[this.$store.state.lang].changePass_t7}} :</p>
      <p>
        <input
          class="text_value"
          type="password"
          v-model="passBox.pass2"
          placeholder="6 digits"
          oninput="this.value=this.value.replace(/\D/g,'')"
          onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
          autocomplete="off"
          onpaste="return false;"
        />
      </p>

      <div @click="resetPass" class="subBtn">OK</div>
    </div>
  </div>
</template>
<script>
import Title from "../layout/Title";
import Timper from "../layout/Timper";
import common from "../common/index";
import Utility from "../common/Utility"
import { Indicator } from "mint-ui";
import {
  getVerificationCode,
  verificationVerificationCode,
  initPassword
} from "../Ajax/index";
export default {
  name: "ChangePassword",
  components: {
    Title,
    Timper,
    Indicator
  },
  watch: {
    passBox: {
      handler: function(ov, nv) {
        console.log(nv);
        //do something
        if ((nv.pass1.length == 6) & (nv.pass2.length == 6)) {
          this.subBtnFlg = true;
        } else {
          this.subBtnFlg = false;
        }
      },
      deep: true
    }
  },
  data() {
    return {
      icon: "fanhui",
      place: "left",
      title_home: this.Lang[this.$store.state.lang].personCenter_t1,
      height:
        (document.documentElement.clientHeight || document.body.clientHeight) -
        40 +
        "px",
      n_layout: false,
      passBox: {
        pass1: "",
        pass2: ""
      },

      subBtnFlg: false
    };
  },
  methods: {
    handleTitleClick() {
      this.$router.go(-1);
    },
    change_next(val) {
      if (val.flg) {
        // alert(val.code)
        let params = common.formdata({
          fuid: this.$store.state.userInfo.fuid,
          timeStamp: new Date().getTime(),
          // obj: this.$store.state.userInfo.fuid,
          phone: this.$store.state.userInfo.account,
          code: val.code
        });

        verificationVerificationCode(params)
          .then(res => {
            this.n_layout = true;
            this.$refs.verticode.style.height = "0px";
            this.$refs.verticode.style.opacity = "0";
            this.$refs.verticode.style.transition = "all 0.4s";
            this.$refs.verticode.style.webkitTransition = "all 0.4s"; /*做兼容*/
            setTimeout(() => {
              this.$refs.verticode.style.display = "none";
            }, 400);
          })
          .catch(err => {
            common.toast({
              message: this.Lang[this.$store.state.lang][err] || err,
              time: 2000
            });
          });
      }
    },
    resetPass() {
      var _this=this
      if (this.subBtnFlg) {
        setTimeout(() => {
           // 对明文密码加密
                     let en=Utility.pass_PublicKey
                          let jse = new _this.$jsEncrypt()
                        jse.setPublicKey(en)
                        // var encrypted = jse.encrypt(params)
                    let newPass=jse.encrypt(this.passBox.pass1)
                    let confirmPass=jse.encrypt(this.passBox.pass2)
                    
              //对明文密码加密

          let params = common.formdata({
            fuid: this.$store.state.userInfo.fuid,
            timeStamp: new Date().getTime(),
            // obj: this.$store.state.userInfo.fuid,
            newPass:newPass,
            confirmPass: confirmPass,
          });

          new Promise(function(resolve, reject) {
            initPassword(params)
              .then(res => {
                resolve();
              })
              .catch(err => {
                reject(err);
              });
          })
            .then(() => {
              Indicator.open({
                text: "Success",
                spinnerType: "fading-circle"
              }),
                setTimeout(() => {
                  Indicator.close();
                  this.$router.go(-1);
                }, 2000);
            })
            .catch(err => {
              common.toast({
                message: this.Lang[this.$store.state.lang][err] || err,
                time: 2000
              });
            });
        }, 10);
      } else {
        common.toast({
          message: "Wrong operation",
          time: 2000
        });
      }
    },
    requestSendCode() {
      // alert(666)
      var that = this;
      let params = common.formdata({
        fuid: this.$store.state.userInfo.fuid,
        timeStamp: new Date().getTime(),
        // obj: this.$store.state.userInfo.fuid,
        phone: this.$store.state.userInfo.account
      });

      setTimeout(() => {
        new Promise(function(resolve, reject) {
          getVerificationCode(params)
            .then(res => {
              that.$refs.timper.doSetInterval();
              resolve();
            })
            .catch(err => {
              reject(err);
            });
        })
          .then(() => {
            //    alert(666)
            Indicator.open({
              text: this.Lang[this.$store.state.lang].changePass_t8,
              spinnerType: "fading-circle"
            });

            setTimeout(() => {
              Indicator.close();
            }, 2000);
          })
          .catch(err => {
            common.toast({
              message: this.Lang[this.$store.state.lang][err] || err,
              time: 2000
            });
          });
      }, 10);
    }
  }
};
</script>
<style scoped>
.n_layout {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  box-sizing: border-box;
  /* text-align: center; */
}
.text {
  line-height: 20px;
}
.text_value {
  border: noen;
  outline: none;
  width: 100%;
  height: 34px;
  /* border-bottom: 1px solid #ccc; */
}
p:nth-child(3) {
  padding-top: 20px;
}
p:nth-child(2),
p:nth-child(4) {
  border-bottom: 1px solid #ccc;
}
.subBtn {
  height: 35px;
  text-align: center;
  line-height: 35px;
  background-color: #1e79bf;
  margin-top: 24px;
  border-radius: 35px;
  color: #ffffff;
}
</style>